import { OrderListStyle, FlexColumnBox, FlexRowBox } from './style';
import React, { useEffect, useState } from 'react';

import { getTablePendingOrder } from '@/service';

const noImg =
  'https://res.lexiangpingou.cn/images/826/2021/05/nW9PwZfalG9pmEwFtp0s6lpxteev9V.png';

const OrderList = (props: any) => {
  const [list, setList] = useState({
    goodsList: [],
    totalPrice: 0,
  });

  useEffect(() => {
    getTablePendingOrder({
      ...props.config,
    }).then((res) => {
      if (res.status === 1 && res.data) {
        setList(res.data);
      } else {
        console.log('参数错误');
      }
    });
    return () => {};
  }, []);

  return (
    <OrderListStyle>
      <div className="order-list">
        {list.goodsList?.length > 0 &&
          list.goodsList?.map((item: any, key) => {
            return (
              <FlexRowBox className="goods" key={item.gid}>
                <img src={item.gimg ? item.gimg : noImg} alt="" />
                <FlexColumnBox className="goods-right">
                  <span className="goods-name">{item.name}</span>
                  <FlexRowBox className="goods-right-bottom">
                    <span className="goods-price">￥{item.price}</span>
                    <span className="goods-num">X{item.num}</span>
                  </FlexRowBox>
                </FlexColumnBox>
              </FlexRowBox>
            );
          })}
      </div>
      <p className="total-price"> 小计： {list.totalPrice} </p>
    </OrderListStyle>
  );
};

export default OrderList;
